<template>
	<view class="user">
		<!-- #ifdef MP-WEIXIN -->
		<view v-show="api_host=='https://www.x-mii.com/app/index.php'">
			<ad unit-id="adunit-0cfa70ccc3390f3d" style="margin-bottom:10rpx"></ad>
		</view>
		<!-- #endif -->
		<view class="cover">
			<!-- <image mode="widthFix" class="bg" src="/static/image/skin/user-cover.png"></image> -->
			<image mode="widthFix" class="bg" :src="cover_bg"></image>

			
			<view class="avatar">
				<!-- <open-data class="image" type="userAvatarUrl"></open-data> -->
				<!-- <open-data class="name" type="userNickName"></open-data> -->
				
				<view v-if="customer" class="image">
					<image v-bind:src="customer.headUrl"></image>
				</view>
				<view v-if="customer" class="name">{{customer.name}}</view>
				<view v-if="!customer" class="btn">
					<!-- <u-button size="mini" type="primary" @click="goto_login" text="用户登录">用户登录</u-button> -->
				</view>
				
			</view>
		</view>

		<view class="data-value" v-if="!!customer">
			<view class="item" >
				<view class="value">{{credit.credit1.value}}</view>
				<view class="name">{{credit.credit1.title}}</view>
			</view>
			<view class="item">
				<navigator url="/sm_shop/pages/user/balance_log">
					<view class="value">{{credit.credit2.value}}</view>
					<view class="name">{{credit.credit2.title}}（￥）</view>
				</navigator>
				
			</view>
			<view class="item">
				<navigator url="/sm_shop/pages/coupon/coupon">
					<view class="value">{{coupon_number}}</view>
					<view class="name">优惠券（张）</view>
				</navigator>
				
			</view>
			 <!--
			<view class="item">
				<view class="value">0</view>
				<view class="name">积分</view>
			</view>

			<view class="item">
				<view class="value">0</view>
				<view class="name">卡</view>
			</view>

			<view class="item">
				<view class="value">0</view>
				<view class="name">优惠券/码</view>
			</view> 
			-->

		</view>

		<view class="order" v-if="!!customer">
			<view class="header">
				<view class="title">我的订单</view>
				<navigator url="/sm_shop/pages/order/list" class="all">查看全部订单</navigator>
			</view>
			<view class="category" v-if="!!customer">

				<view class="item">
					<navigator url="/sm_shop/pages/order/list?status=pending">
						<view class="icon">
							<!-- <view v-show="!!pending_order_total" 
							class="tips-number">{{pending_order_total}}</view> -->
							<u-badge size="mini" type="error" 
								is-center="true"
								:count="pending_order_total"></u-badge>
							<image mode="widthFix" 
							src="/static/image/skin/order/daifukuan.svg"></image>
						</view>
						<view class="name">待付款</view>
					</navigator>

				</view>
				<view class="item">
					<navigator url="/sm_shop/pages/order/list?status=processing">
						<view class="icon">
<!-- 							<view v-show="processing_order_total"
							 class="tips-number">{{processing_order_total}}</view> -->
							<u-badge size="mini" type="primary" 
								is-center="true"
								:count="processing_order_total"></u-badge>
							<image src="/static/image/skin/order/daifahuo.svg"></image>
						</view>
						<view class="name">待发货</view>
					</navigator>
				</view>
				<view class="item">
					<navigator url="/sm_shop/pages/order/list?status=shipping">
						<view class="icon">
							<!-- <view v-show="shipping_order_total" class="tips-number">{{shipping_order_total}}</view> -->
							<u-badge size="mini" type="primary"
								is-center="true"
								:count="shipping_order_total"></u-badge>
							<image src="/static/image/skin/order/fahuo.svg"></image>
						</view>
						<view class="name">待收货</view>
					</navigator>
				</view>
				<view class="item">
					<navigator url="/sm_shop/pages/order/list?status=complete">
						<view class="icon">
							<image src="/static/image/skin/order/pingjia.svg"></image>
						</view>
						<view class="name">待评价</view>
					</navigator>
				</view>
				<view class="item hide">
					<navigator url="/sm_shop/pages/order/list?status=complete">
						<view class="icon">
							<image src="/static/image/skin/order/tuikuan.svg"></image>
						</view>
						<view class="name">退款/售后</view>
					</navigator>
				</view>
			</view>
		</view>

		<view class="menu">

			
			<navigator class="item"
			  v-if="!!customer"
			 url="/sm_shop/pages/distributor/distributor">
				<view class="icon">
					<u-icon name="man-add-fill"></u-icon>
				</view>
				<view class="name">
					分销商
				</view>
				<view class="arrow"></view>
			</navigator>
			
				
			
			<navigator v-if="!!customer"
			class="item" url="/sm_shop/pages/user/qrcode">
				<view class="icon">
					<u-icon name="grid-fill"></u-icon>
					<!-- <image mode="widthFix" src="/static/image/skin/user/addr.png"></image> -->
				</view>
				<view class="name">
					推荐码
				</view>
				<view class="arrow"></view>
			</navigator>
			
			<navigator class="item" 
			 v-if="!!customer"
			url="/sm_shop/pages/address/address">
				<view class="icon">
					<u-icon name="map-fill"></u-icon>
					<!-- <image mode="widthFix" src="/static/image/skin/user/addr.png"></image> -->
				</view>
				<view class="name">
					收货地址
				</view>
				<view class="arrow"></view>
			</navigator>

			<view class="item">
				<view class="icon">
					<u-icon name="server-fill"></u-icon>
					<!-- <image mode="widthFix" src="/static/image/skin/user/kefu2.png"></image> -->
				</view>
				<view class="name ">
					<button class="contact" open-type="contact">联系客服</button>
				</view>
				<view class="arrow"></view>
			</view>
			
			<navigator v-if="entry_box==1 && !!customer" class="item" url="/sm_shop/pages/box/box">
				<view class="icon">
					<u-icon name="map-fill"></u-icon>
				</view>
				<view class="name">
					盲盒商城
				</view>
				<view class="arrow"></view>
			</navigator>

		</view>
		<view class="login-btn" v-if="!customer">
		<!-- <view class="login-btn" > -->
			<u-button type="primary" @click="goto_login" text="用户登录">用户登录</u-button>
		</view>

		<trademark></trademark>
	</view>
</template>

<script>
	import trademark from '../../common/trademark';
	const appInstance = getApp();
	export default {
		data() {
			return {
				api_host:appInstance.globalData.api_host,
				title: 'user',
				cover_bg:'',
				entry_box:0,
				pending_order_list: [],
				pending_order_total: 0,
				processing_order_list: [],
				processing_order_total: 0,
				shipping_order_list: [],
				shipping_order_total: 0,
				credit:null,
				coupon_number:0,
				group:null,
				customer:null,
			}
		},
		onLoad( options ) {
			var that = this;
			var host = appInstance.globalData.api_host.split('/app')[0];
			// this.cover_bg = host + '/addons/sm_shop/assets/image/user-cover.png';
			this.cover_bg = appInstance.globalData.customer_bg_img;
			this.entry_box = appInstance.globalData.customer_entry_box;
			// appInstance.util.footer(that);
			// appInstance.globalData.checkUserStatus();
			// this.init(options);
		},
		onPullDownRefresh() {
		    console.log('refresh');
			var t = this;
		    setTimeout(function () {
				// var t = this;
				
				t.init();
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onShow:function(){
			
			this.init();
		},
		methods: {

			init: function(options) {
				
				appInstance.globalData.checkUserStatus( res=>{
					
					t.credit = res.data.credit;
					t.group = res.data.group;
					t.coupon_number = res.data.coupon.length;
					t.customer = res.data.customer;
				});
				
				var t = this;

				this.get_order_list({
					status: 'pending'
				});
				this.get_order_list({
					status: 'processing'
				});
				this.get_order_list({
					status: 'shipping'
				});
				
			},

			get_order_list: function(params, callback) {

				var t = this;
				var url = '&r=checkout.order.get_list';
				var data = {
					status: params.status
				};

				appInstance.globalData.request(url, data, "GET", res => {

					if (res.data.list) {

						// callback( res );
						if (params.status == 'pending') {
							t.pending_order_list = res.data.list;
							t.pending_order_total = res.data.total;
						}

						if (params.status == 'shipping') {
							t.shipping_order_list = res.data.list;
							t.shipping_order_total = res.data.total;
						}

						if (params.status == 'processing') {
							t.processing_order_list = res.data.list;
							t.processing_order_total = res.data.total;
						}

					}

				});

			},
			goto_login:function(){
				// console.log('goto_login')
				uni.navigateTo({
					url:'/sm_shop/pages/user/login'
				})
			},
			app_wx_login:function(){
				// console.log('goto_login')
				uni.navigateTo({
					url:'/sm_shop/pages/user/app_wx_login'
				})
			}
		},
		components:{
			trademark
		}
	}
</script>

<style lang="less">

.user{

  .cover{

    .bg{
      width:100%;
    }

    height: 400rpx;
    overflow: hidden;
    position:relative;

    .avatar{

      position:absolute;
      top:160rpx;
      padding:0 40rpx;
      display: flex;
      align-items: center;
      image,.image{

        flex:none;
        width:80rpx;
        height:80rpx;
        border-radius: 40rpx;
        overflow: hidden;

      }
      .name{

        padding-left:20rpx;
        font-weight:bold;
        font-size:32rpx;
        flex:auto;
      }

      .get-user-info{
        width: auto;
        font-size: 28rpx;
        display: inline-block;
        padding: 0 10rpx;
        color: #333;
        font-weight: normal;
      }

    }
  }

  .data-value{

    display:flex;

    justify-content: space-between;
    margin-top:40rpx;
    .item{

      flex:1;

      line-height:2;
      text-align: center;

      .value{

        font-weight: bold;
        font-size:30rpx;
      }

      .name{

        font-size:22rpx;
        color:rgb(159,159,159);
      }

    }

  }

  .order{

    margin-top:40rpx;
    padding:0 40rpx;
    .header{

      display: flex;
      justify-content: space-between;
      border-bottom:solid 1px rgb(245,246,248);

      align-items: center;
      height:80rpx;
      .title{

        font-size:28rpx;
        font-weight: bold;

      }
      .all{
        font-size:24rpx;
        color:rgb(159,159,159);
        position:relative;
        padding-right:30rpx;
        &:after{
          position:absolute;
          top:11rpx;
          right:0;
          content: "";
          width:10rpx;
          height:10rpx;
          border-bottom: solid 1px rgb(159,159,159);
          border-right: solid 1px rgb(159,159,159);
          transform: rotate(-45deg);
        }
      }
    }
    .category{

      display: flex;
      justify-content: space-between;
      margin:20rpx 0 ;
      .item{

        color:rgb(55,55,55);
        text-align:center;
        line-height:2;
        .icon{

          position:relative;
          image{
            width:40rpx;
            height:40rpx;
          }

          .tips-number{

            position:absolute;
            top:-12rpx;
            right:-8rpx;
            width:24rpx;
            height:24rpx;
            border-radius: 12rpx;
            background-color: #ff4040;
            color:#fff;
            text-align:center;
            line-height:24rpx;
            font-size:22rpx;
          }

        }
        .name{

          font-size:22rpx;

        }
      }
    }
  }

  .menu{

    margin-top:40rpx;
    padding:0 40rpx;
    .item{

      display:flex;
      justify-content: space-between;
      align-items: center;
      border-bottom:solid 1px #eee;
      height:100rpx;

      
      &:last-child{
        border-bottom: none;
      }
      .icon{

        flex:none;
        image{
          width:40rpx;
          height:40rpx;
          position:relative;
          top:2rpx;
        }

      }
      .name{
        flex:auto;
        padding-left: 20rpx;
        .contact{
          text-align: left;
          padding-left: 0;
          margin-left: 0;
          font-weight:normal;
          background:none;
          font-size:32rpx;
        }
      }

      .arrow{

        flex:none;
        border-color: rgb(138,138,138);

      }

    }

  }
  .login-btn{
	  margin-top:160rpx;
	  padding:20rpx;
  }
}

</style>
